<template>
	<view class="container">
		<view class="welcome">
			<text class="welcome__title">欢迎来到冲冲餐厅{{ tabBar }}</text>
		</view>
		
		<view class="people-view">
			<view class="people-view__header">
				<text class="people-view__greeting">您好，请选择就餐人数</text>
			</view>

			<scroll-view 
				scroll-x 
				class="people-view__scroll" 
				:enable-flex="true"
				show-scrollbar="false"
			>
				<view class="people-view__numbers">
					<view
						v-for="(item, index) in peopleNumbers"
						:key="index"
						class="number-item"
						:class="{'number-item--active': selectedIndex === index}"
						@click="selectPeople(index, item)"
					>
						{{ item }}人
					</view>
				</view>
			</scroll-view>

			<button 
				class="start-button"
				:class="{'start-button--active': isSelected}"
				:disabled="!isSelected"
				@click="startOrder"
			>
				开始点餐
			</button>
		</view>
	</view>
</template>

<script>
export default {
	name: 'OrderIndex',
	data() {
		return {
			selectedIndex: -1,
			peopleNumbers: [1, 2, 3, 4, 5, 6],
		}
	},
	computed:{
		isSelected() {
			return this.selectedIndex > -1
		}
	},
	methods: {
		selectPeople(index, count) {
			this.selectedIndex = index
		},

		startOrder() {
			if (!this.isSelected) return
			
			uni.switchTab({
				url: '/pages/homeMenu/homeMenu'
			})
			
			uni.setStorageSync('orderPeople', this.peopleNumbers[this.selectedIndex])
		}
	}
}
</script>

<style lang="scss">
	page {
		height: calc(100vh - 100rpx);
		background: url('../../static/bg.jpg') no-repeat;
		background-size: cover;
		overflow: hidden;
	}

	.container {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		overflow: hidden;
	}

	.welcome {
		padding-top: 270rpx;
		text-align: center;
		
		&__title {
			font-size: 50rpx;
			color: #FFFFFF;
			font-family: 'Microsoft YaHei', sans-serif;
			text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
		}
	}

	.people-view {
		position: fixed;
		left: 30rpx;
		right: 30rpx;
		bottom: 100rpx;
		padding: 40rpx 20rpx;
		background-color: #FFFFFF;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);

		&__header {
			display: flex;
			align-items: center;
			margin-bottom: 40rpx;
		}

		&__greeting {
			font-size: 32rpx;
			font-weight: 500;
			color: #333;
		}

		&__scroll {
			width: 100%;
			white-space: nowrap;
			::-webkit-scrollbar {
				display: none;
			}
			margin: 40rpx 0;
		}

		&__numbers {
			display: flex;
			padding: 20rpx 0;
		}
	}

	.number-item {
		min-width: 160rpx;
		height: 80rpx;
		line-height: 80rpx;
		margin-right: 20rpx;
		text-align: center;
		background-color: #f7f8f9;
		border-radius: 12rpx;
		font-size: 28rpx;
		color: #333;
		transition: all 0.3s ease;

		&--active {
			background: #1296db;
			color: #FFFFFF;
		}

		&:last-child {
			margin-right: 0;
		}
	}

	.start-button {
		margin-top: 60rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		border-radius: 12rpx;
		font-size: 32rpx;
		background-color: #4aa3d2;
		color: #c2c2c2;
		transition: all 0.3s ease;

		&--active {
			background: linear-gradient(to right, #4aa3d2, #339bd1, #1d92d0, #1296db);
			color: #FFFFFF;
		}

		&:active {
			transform: scale(0.98);
		}
	}
</style>
